<template>
	<div class="notice">
		<el-card class="box-card" shadow="hover">
			<div slot="header"  class="clearfix">
				<span class="clearfix-clr">门店列表</span>
			</div>
			<!-- 查询 -->
			<div class="box-form">
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
				  <el-form-item label="门店">
					<el-input v-model="key" placeholder="门店名" class="demo-form-ipt"></el-input>
				  </el-form-item>
				  <el-form-item label="服务范围">
					<el-select v-model="formInline.region" placeholder="请选择" class="demo-form-ipt">
					  <el-option label="服装鞋帽" value="shanghai"></el-option>
					  <el-option label="蔬菜水果" value="beijing"></el-option>
					  <el-option label="早餐早点" value="beijing"></el-option>
					</el-select>
				  </el-form-item>
				  <el-form-item>
					<el-button type="primary" class="form-btn" @click="getNoticeList">查询</el-button>
				  </el-form-item>
				</el-form>
				<el-button type="primary" class="form-btn" @click="dialogVisible = true">添加</el-button>
				<el-button type="danger" class="form-btn" @click="DelAll" >批量删除</el-button>
			</div>
			<!-- 表格 -->
			<div class="box-table box-form">
				<el-table
					 @selection-change="handleSelectionChange"
					ref="multipleTable"
					:data="noticelist"
					tooltip-effect="dark"
					border
					style="width: 100% ;margin: 0 auto"
					>
					<el-table-column
					  type="selection"
					  align="center">
					</el-table-column>
					<el-table-column 
					  prop="id"
					  label="id"
					  align="center">
					</el-table-column>
					<el-table-column
					  prop="name"
					  align="center"
					  label="门店">
					  <!-- <template slot-scope="scope">
						<span
						@click="leixing(scope.row)"
						style="color:#2981ff;text-decoration:underline;"
						>{{scope.row.typename}}</span>
						<el-dialog title="详情" :visible.sync="centerDialogVisible" width="50%" center>
						<div class="home">
							这当然是详情了
						</div>
						</el-dialog>
					</template> -->
					</el-table-column>
					<el-table-column
					  prop="address"
					  align="center"
					  label="地址">
					</el-table-column>
					<el-table-column
					  prop="logo"
					  align="center"
					  label="门店logo">
					  
					</el-table-column>
					<el-table-column
					  prop="services"
					  align="center"
					  label="服务范围">
					</el-table-column>
					<el-table-column
					  prop="username"
					  align="center"
					  label="店主">
					</el-table-column>
					<el-table-column
					  prop="mobile"
					  align="center"
					  label="联系电话">
					</el-table-column>
					<el-table-column
					  prop="startTime"
					  align="center"
					  label="营业时间">
					</el-table-column>
					<el-table-column
					  align="center"
					  label="操作">
					  <template slot-scope="scope">
						  <el-button type="success" @click="update(scope.row)" style="padding: 10px 20px;">修改</el-button>
					  	<el-button type="danger" @click="del(scope.row.id)" style="padding: 10px 20px;">删除</el-button>
					  </template>
					</el-table-column>
				  </el-table>
			</div>
			<!-- 分页 -->
			<div class="block">
				<el-pagination
				  :current-page="pages.page"
				  :page-sizes="[10, 20, 30, 40]"
				  :page-size="pages.psize"
				  @size-change="handleSizeChange"
				  @current-page="handleCurrentChange"
				  layout="total, sizes, prev, pager, next, jumper"
				  :total="pages.total">
				</el-pagination>
			  </div>
		</el-card>

		<!-- 添加 -->

		<el-dialog
		  title="添加门店"
		  :visible.sync="dialogVisible"
		  width="40%"
		  align="center"
		  :before-close="handleClose">
		  <!-- 添加表单 -->
		  <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  class="demo-ruleForm">
		    <div style="display: inline-block; width: 40%;" >
				<el-form-item label="店名" prop="name">
				  <el-input v-model="ruleForm.name" placeholder="皮婆婆烧鸡" style="width: 70%;float: right;" ></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="mobile">
				  <el-input v-model="ruleForm.mobile" placeholder="13791471196" style="width: 70%;float: right;"></el-input>
				</el-form-item>
				<el-form-item label="营业时间" >
				  <el-col :span="9">
					<el-form-item prop="startTime">
					  <el-time-picker placeholder="21:30" v-model="ruleForm.startTime" style="width: 95%;"></el-time-picker>
					</el-form-item>
				  </el-col>
				  <el-col :span="9">
					<el-form-item prop="endTime">
					  <el-time-picker placeholder="21:30" v-model="ruleForm.endTime" style="width: 95%;"></el-time-picker>
					</el-form-item>
				  </el-col>
				</el-form-item>
				<el-form-item label="服务范围" prop="services">
				  <el-select v-model="ruleForm.services"  style="width: 70%;float: right;" placeholder="请选择">
					<el-option label="服装鞋帽" value="服装鞋帽"></el-option>
					<el-option label="蔬菜水果" value="蔬菜水果"></el-option>
					<el-option label="早餐早点" value="早餐早点"></el-option>
				  </el-select>
				</el-form-item>
				<el-form-item label="店主" prop="username">
				  <el-input v-model="ruleForm.username" placeholder="张四" style="width: 70%;float: right;"></el-input>
				</el-form-item>
				<el-form-item label="门店介绍" prop="intro">
				  <el-input type="textarea" v-model="ruleForm.intro" style="width: 70%;float: right;"></el-input>
				</el-form-item>
				</div>
				<div style="float: right;width: 40%; margin-top: 80px;">
					<el-form-item label="门店地址" prop="address">
					  <el-input v-model="ruleForm.address" placeholder="巩华新村n区四栋" style="width: 50%;"></el-input>
					</el-form-item>
					<el-form-item label="门店logo" prop="images">
						<el-upload
						  class="avatar-uploader"
						  action="https://jsonplaceholder.typicode.com/posts/"
						  :show-file-list="false"
						  :on-success="handleAvatarSuccess"
						  :before-upload="beforeAvatarUpload">
						  <img v-if="imageUrl" :src="imageUrl" class="avatar">
						  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
					<el-form-item label="门店上传" prop="images">
						<el-upload
						  class="upload-demo"
						  action="https://jsonplaceholder.typicode.com/posts/"
						  :on-change="handleChange"
						  :file-list="fileList">
						  <el-button size="small" type="primary">点击上传</el-button>
						</el-upload>
					</el-form-item>
				</div>
			</el-form>
			<div class="dialog-footer">
				<span slot="footer" >
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="add">确 定</el-button>
				</span>
			</div>
		  
		</el-dialog>

  		<!-- 修改 -->

		<el-dialog
		  title="添加门店"
		  :visible.sync="xiugai"
		  width="40%"
		  align="center"
		 >
		  <!-- 修改表单 -->
		  <el-form :model="updata" ref="ruleForm"  class="demo-ruleForm">
		    <div style="display: inline-block; width: 40%;" >
				<el-form-item label="店名" prop="name">
				  <el-input v-model="updata.name" placeholder="皮婆婆烧鸡" style="width: 70%;float: right;" ></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="mobile">
				  <el-input v-model="updata.mobile" placeholder="13791471196" style="width: 70%;float: right;"></el-input>
				</el-form-item>
				<el-form-item label="营业时间" >
				  <el-col :span="9">
					<el-form-item prop="startTime">
					  <el-time-picker placeholder="21:30" v-model="updata.startTime" style="width: 95%;"></el-time-picker>
					</el-form-item>
				  </el-col>
				  <el-col :span="9">
					<el-form-item prop="endTime">
					  <el-time-picker placeholder="21:30" v-model="updata.endTime" style="width: 95%;"></el-time-picker>
					</el-form-item>
				  </el-col>
				</el-form-item>
				<el-form-item label="服务范围" prop="services">
				  <el-select v-model="updata.services"  style="width: 70%;float: right;" placeholder="请选择">
					<el-option label="服装鞋帽" value="服装鞋帽"></el-option>
					<el-option label="蔬菜水果" value="蔬菜水果"></el-option>
					<el-option label="早餐早点" value="早餐早点"></el-option>
				  </el-select>
				</el-form-item>
				<el-form-item label="店主" prop="username">
				  <el-input v-model="updata.username" placeholder="张四" style="width: 70%;float: right;"></el-input>
				</el-form-item>
				<el-form-item label="门店介绍" prop="intro">
				  <el-input type="textarea" v-model="updata.intro" style="width: 70%;float: right;"></el-input>
				</el-form-item>
				</div>
				<div style="float: right;width: 40%; margin-top: 80px;">
					<el-form-item label="门店地址" prop="address">
					  <el-input v-model="updata.address" placeholder="巩华新村n区四栋" style="width: 50%;"></el-input>
					</el-form-item>
					<el-form-item label="门店logo" prop="images">
						<el-upload
						  class="avatar-uploader"
						  action="https://jsonplaceholder.typicode.com/posts/"
						  :show-file-list="false"
						  :on-success="handleAvatarSuccess"
						  :before-upload="beforeAvatarUpload">
						  <img v-if="imageUrl" :src="imageUrl" class="avatar">
						  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
					<el-form-item label="门店上传" prop="images">
						<el-upload
						  class="upload-demo"
						  action="https://jsonplaceholder.typicode.com/posts/"
						  :on-change="handleChange"
						  :file-list="fileList">
						  <el-button size="small" type="primary">点击上传</el-button>
						</el-upload>
					</el-form-item>
				</div>
			</el-form>
			<div class="dialog-footer">
				<span slot="footer" >
					<el-button @click="xiugai = false">取 消</el-button>
					<el-button type="primary" @click="amend">确 定</el-button>
				</span>
			</div>
		  
		</el-dialog>
	</div>
</template>

<script>
import {noticelist,noticedel,noticedelel,noticeadd} from '../../api/user.js'
	export default {
	    data() {
	      return {
			   ruleForm: {
					id:0,
					name: '',
					mobile: '',
					pass:null,
					tel:'',
					logo:'',
					address: '',
					startTime: '',
					endTime: '',
					services: '',
					username: '',
					intro:'',
					images:[]
			  },
			// 修改数据
			updata: [
				{
				id:8,
				name: '',
				mobile: '',
				pass:null,
				tel:'',
				logo:'',
				address: '',
				startTime: '',
				endTime: '',
				services: '',
				username: '',
				intro:'',
				images:[]
				},
			],
			  key:'',
			  imageUrl: '',
			  fileList: [],
			  xiugai: false,
			  rules: {},
			dialogVisible: false,
	        formInline: {
	          user: '',
	          region: ''
	        },
			multipleSelection: [],
			noticelist:[],
			pages:{
				page:1,
				psize:6,
				total:0
			},
			}
	    },
		created(){
			this.getNoticeList()
		},
	    methods: {
			// 门店列表渲染
			async getNoticeList(){
				let res = await noticelist({
					page:this.pages.page,
					psize:this.pages.psize,
					key:this.key //查询
				})
				console.log(res,'0000');
				this.noticelist = res.data.list
				this.pages.total = res.data.counts
				// this.pages.total= res.data.counts
			},
			async add(){
				// const edituser = sessionStorage.getItem()
				 const params = {
					id:0,
					name: this.ruleForm.name,
					mobile: this.ruleForm.mobile,
					pass:this.ruleForm.pass,
					tel:this.ruleForm.tel,
					logo:this.ruleForm.logo,
					address: this.ruleForm.address,
					startTime: this.ruleForm.startTime,
					endTime: this.ruleForm.endTime,
					services: this.ruleForm.services,
					username: this.ruleForm.username,
					intro:this.ruleForm.intro,
					images:this.ruleForm.images,
				 }
				 let res = await noticeadd(params)
				 console.log(res);
				 if(res.errCode === 10000){
					 this.dialogVisible = false
					 this.getNoticeList()
				 }
			},
			 handleSelectionChange(val) {
			console.log(val);
			this.selectID = val;
			},
			//修改
			update(option) {
				console.log(option);
				this.updata = option;
				this.xiugai = true;
				// this.amend()
			},

			async amend() {
			let res = await noticeadd({
				id: this.updata.id,
				name: this.updata.name,
				mobile: this.updata.mobile,
				pass:this.updata.pass,
				tel:this.updata.tel,
				logo:this.updata.logo,
				address: this.updata.address,
				startTime: this.updata.startTime,
				endTime: this.updata.endTime,
				services: this.updata.services,
				username: this.updata.username,
				intro:this.updata.intro,
				images:this.updata.images,
			});
			if (res.errCode == "10000") {
				this.$message({
				type: "success",
				message: "修改成功",
				});
				this.xiugai = false;
				this.getNoticeList();
			}
			},
			//  leixing() {
			// 	this.centerDialogVisible = true;
			// },
			//批量删除
			DelAll() {
			let ids = [];
			this.selectID.forEach((element) => {
				console.log(element);
				ids.push(element.id);
			});
			this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
				center: true,
			})
				.then(async () => {
				let data = await noticedelel({
					ids: ids,
				});
				if (data.errCode == "10000") {
					this.$message({
					type: "success",
					message: "删除成功!",
					});
				}
				this.getNoticeList();
				})
				.catch(() => {
				this.$message({
					type: "info",
					message: "已取消删除",
				});
				});
			},
  
			  // 单个删除
			  del(id) {
			          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
			            confirmButtonText: '确定',
			            cancelButtonText: '取消',
			            type: 'warning'
			          }).then(() => {
						noticedel({id:id}).then((res)=>{
							if(res.errCode == 10000){
								this.getNoticeList()
							}
						})
			            this.$message({
			              type: 'success',
			              message: '删除成功!'
			            });
			          }).catch(() => {
			            this.$message({
			              type: 'info',
			              message: '已取消删除'
			            });          
			          });
			        },
		  toggleSelection(rows) {
			if (rows) {
			  rows.forEach(row => {
				this.$refs.multipleTable.toggleRowSelection(row);
			  });
			} else {
			  this.$refs.multipleTable.clearSelection();
			}
		  },
		//   handleSelectionChange(val) {
		// 	this.multipleSelection = val;
		//   },
		  // 分页
		  handleSizeChange(val) {
		  	console.log(`每页 ${val} 条`);
			this.pages.psize = val
			this.getNoticeList()
		  },
		  handleCurrentChange(val) {
		  	console.log(`当前页: ${val}`);
			this.pages.page = val
			this.getNoticeList()
		  },
		  // 门店上传
		  handleAvatarSuccess(res, file) {
			  this.imageUrl = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload(file) {
			  const isJPG = file.type === 'image/jpeg';
			  const isLt2M = file.size / 1024 / 1024 < 2;
	  
			  if (!isJPG) {
				this.$message.error('上传头像图片只能是 JPG 格式!');
			  }
			  if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!');
			  }
			  return isJPG && isLt2M;
			},
			// 图片上传
			 handleChange(file, fileList) {
				this.fileList = fileList.slice(-3);
			  },
		   handleClose(done) {
			  this.$confirm('确认关闭？')
				.then(_ => {
				  done();
				})
				.catch(_ => {});
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
				  if (valid) {
					alert('submit!');
				  } else {
					console.log('error submit!!');
					return false;
				  }
				});
			  },
			  resetForm(formName) {
				this.$refs[formName].resetFields();
			  }
			},
	    }
</script>


<style>
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .demo-form-ipt{
	  width: 120px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-table{
	  margin-top: 30px;
  }
  .form-btn{
	  width: 100px;
  }
  .form-btn:nth-child(1){
	  margin-left: 40px;
  }
  .clearfix-clr{
	  color: #708fff;
  }
  .block{
	  text-align: center;
	  margin-top: 20px;
  }
  .dialog-footer{
	  text-align: right;
	  margin-right: 50px;
  }
  .item-form{
	  display: flex;
	  justify-content: space-between;
  }
   .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 108px;
      height: 108px;
      line-height: 108px;
      text-align: center;
    }
    .avatar {
      width: 108px;
      height: 108px;
      display: block;
    }
  .box-card {
	  width: 100%;
	  border: none;
  }
  .box-form{
	  margin-left: 20px;
  }
</style>		
